<template>
    <div id="EnrollManage">
         <table class="table">
            <tbody>
               <tr>
                    <td>  
                        <el-input placeholder="姓名" v-model="searchData.sname" prefix-icon="el-icon-search"
                        @focus="clearAnotherInput('sname')" clearable
                        >
                        </el-input>
                    </td>
                    <td>
                         <el-input  placeholder="联系电话"   v-model="searchData.mobile"     prefix-icon="el-icon-search" @focus="clearAnotherInput('mobile')" clearable>
                        </el-input>
                    </td>
                    <td>
                         <el-date-picker
                            v-model="searchData.arriveTime"
                            type="date"
                            placeholder="上门时间"
                            
                            value-format="yyyy-MM-dd"
                            suffix-icon="el-icon-date"
                            @focus="clearAnotherInput('arriveTime')"
                            >
                        </el-date-picker>
                    </td>
                    <td>
                         <el-input placeholder="咨询师" v-model="searchData.advisor"  @focus="clearAnotherInput('advisor')"   prefix-icon="el-icon-search" clearable>
                        </el-input>
                    </td>
                     <td>
                        <el-select v-model="searchData.status" placeholder="状态" @click.native="loadStatus">
                            <el-option v-for="item in social_status "
                            :key="item.kvalue"
                            :label="item.kvalue"
                            :value="item.kkey"
                            suffix-icon="el-icon-search"

                            ></el-option>
                        </el-select>
                    </td>
                    <td>
                        <el-button type="primary" @click="search(searchData,baseURL)"  prefix-icon="el-icon-date">查询</el-button>
                    </td>
                </tr>
            </tbody>
        </table>
        <el-row style="margin-bottom:20px">
            <el-col>
                <el-button type="primary" @click="stepIntoClassVisible=true,cityId='',campusId='',classId=''">加入班级</el-button>
            </el-col>
        </el-row>
        <table class="table  table-bordered">
            <tbody>
                <tr class="tableHeader">
                    <td>
                      <el-checkbox  v-model="checkAll" @change="selectAll">全选</el-checkbox>    
                    </td>
                    <td>姓名</td>
                    <td>联系电话</td>
                    <td>上门时间</td>
                    <td>咨询师</td>
                    <td>试学老师</td>
                    <td>运营</td>
                    <td>缴费</td>
                    <td>操作</td>
                </tr>
                <tr v-for="(item,key) in dataSource" :key="key" class="tableRow">
                    <td>
                        <input type="checkbox" v-model="selectStudents" :value="item">
                    </td>
                    <td>{{item.sname}}</td>
                    <td>{{item.mobile}}</td>
                    <td>{{item.arriveTime}}</td>
                    <td>{{item.advisor}}</td>
                    <td>{{item.teacher}}</td>
                    <td>{{item.isTry?"是":"否"}}</td>
                    <td>{{item.isPay?"是":"否"}}</td>
                    <td>
                         <el-button
                        size="mini"
                        @click="follow(key,item)"  type="danger" plain>
                        跟踪</el-button>
                       
                        <el-button type="primary" plain size="mini" @click="stepIntoClassVisible = true,selectStudents=[item],campusId='',cityId=''">加入班级</el-button>
                    </td>
                </tr>
            </tbody>
        </table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="totalRecord"
            @current-change="currentChange"
            :page-size="5"
            >
        </el-pagination>

        <!-- 入班操作 -->
        <el-dialog
            title="提示"
            :visible.sync="stepIntoClassVisible"
            width="30%"
            :before-close="handleClose">
            <ul>
                <li class="stepIntoClassDialog">
                    <span style="margin-right:20px">城市:</span> 
                    <el-select @click.native="loadCityList" v-model="cityId">
                        <el-option v-for="(item,key) in cityList" :key="key" :label="item.cityName" :value="item.id"></el-option>
                    </el-select>
                </li>
                <li class="stepIntoClassDialog">
                    <span style="margin-right:20px">校区:</span>
                    <el-select @click.native="loadCampusList" v-model="campusId">
                        <el-option  v-for="(item,key) in campusList" :key="key" :label="item.campusName" :value="item.id"></el-option>
                    </el-select>
                </li>
                <li class="stepIntoClassDialog">
                    <span style="margin-right:20px">班级:</span>
                    <el-select @click.native="loadAllClassByCampusId" v-model="classId">
                        <el-option  v-for="(item,key) in classList" :key="key" :label="item.className" :value="item.id"></el-option>
                    </el-select>
                </li>
            </ul>
            <span slot="footer" class="dialog-footer">
                <el-button @click="stepIntoClassVisible = false">取 消</el-button>
                <el-button type="primary" @click="stepIntoClassVisible = false,insertStudentIntoClass()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import cityMixin from '@/Mixins/cityCampusMixin'
export default {
    mixins: [cityMixin],
    data(){
        return {
            totalRecord: 10,
            tempDataSource: [],
            totalPage: 10,
            arriveTime: '',
            valur: '',
            social_status:[],
            baseURL: window.baseURL+"/backstage/enroll/findByPage?token="+this.$token+"&",
            isIndeterminate:true,
            stepIntoClassVisible: false,
            checkAll: false, //是否全选
            selectStudents:[], //存储选中的学生信息
            results: [],
            searchData: { //搜索数据
                sname: '',
                mobile: '',
                arriveTime: '',
                advisor: '',
                status: '',
            },
            dataSource: [] //显示的学生的数据列表
        }
    },
    methods: {
        loadCityList(){
            var cityURL = window.baseURL + "/backstage/city/findByPage?token="+this.$token;            
            var cityPromise = this.loadCity(cityURL);
            cityPromise.then((response)=>{
                this.cityList = response.data.data.list.results;
            })
        },
        loadCampusList(){
            if(!this.cityId.length){
                 this.$alert('请先选择城市', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                        type: 'info',
                        message: `action: ${ action }`
                        });
                    }
                    });
                return;
            }
            var campusURL = window.baseURL+"/backstage/campus/findByCity?token="+this.$token+"&cityId="+this.cityId
           var campusPromise = this.loadAllCampus(this.cityId);
            campusPromise.then((response)=>{
                this.campusList = response.data.data;
            })
        },
        //将学员放入到指定班级
        insertStudentIntoClass(item){
                var stepIntoClassStudentId = '';
                for(var i=0;i<this.selectStudents.length;i++){
                    stepIntoClassStudentId += this.selectStudents[i].id+',';
                }
                stepIntoClassStudentId = stepIntoClassStudentId.substring(0,stepIntoClassStudentId.length-1);
                var chooseClassURL = window.baseURL + "/backstage/social/chooseClass";
                var campusId = JSON.parse(localStorage.getItem('responseData')).account.campusId;
                let action = ()=>{
                    this.$http.post(chooseClassURL,this.$qs.stringify({idString:stepIntoClassStudentId,token:this.$token,classId: this.classId,campusId:campusId}))
                    .then((response)=>{
                        if(response.data.success){
                            this.$message({
                                message: response.data.message,
                                type: 'success'
                            });
                            // this.$router.go(-1);
                            this.stepIntoClassVisible = false;
                            this.loadData(1);
                        }else{
                            this.$message.error(response.data.message);
                        }
                    })
                }
                this.operatorConfirm(action,'学生入班'); 
        },
        handleClose(){
            this.stepIntoClassVisible = false;
        },
        selectAll(){
           if(this.checkAll){
               this.selectStudents = this.results;
           }else{
               this.selectStudents = [];
           }
        },
        loadData(pageNo){
            var socialURL = window.baseURL+"/backstage/social/findEnrollByPage?token="+this.$token+"&signal="+3;
            this.$http.get(socialURL)
            .then((response)=>{
                //重新加载数据,则将上一页选中的学生全名清空,重新选择
                this.checkAll = false;
                this.selectStudents = [];
                //获取数据,这个dataSource有可能冲突
                this.dataSource = response.data.data.list.results;
                //获取当前页的数据,用于判断全选长度的判断
                this.results = response.data.data.list.results;
                this.tempDataSource = this.dataSource;
                this.totalPage = response.data.data.list.totalPage;
                this.totalRecord = response.data.data.list.totalRecord;
            })
            .catch((error)=>{
                console.log(error);
            })
        },
        follow(index,visitor){
            localStorage.setItem("currentVisitor",JSON.stringify(visitor));
            this.$router.push({name:'EnrollFllowVisitor',params: {currentVisitor:visitor}})
        },
         currentChange(value){
            this.loadData(value);
        },
        loadStatus(){
            var sourceURL = window.baseURL + "/backstage/config/findConfigs?ktype=social_status&token=" +this.$token;
            this.$http.get(sourceURL)
            .then(response => {
                this['social_status'] = response.data.data;
            })
            .catch(error => {
            });
        },
    },
    filters: {
        showStatus(value){
            var status = ["2天之内关单","1周内关单","长期跟单","无效量"]
            return status[value-1];
        }
    },
    created(){
        this.loadData(1);
        this.campusId = ''
    },
    watch: {
        selectStudents(newValue){
           //如果当前页全选,选择完成之后,添加到班级里,然后状态发生变化,重新发起请求,获取剩下的数据
           if(this.selectStudents.length==this.results.length){
               this.checkAll = true;
           }else{
               this.checkAll = false;
           }
        }
    },
    beforeRouteLeave (to, from, next) {
        next();
    }
}
</script>
<style lang="scss" scoped>
    #EnrollManage{
        width: 100%;
        height: 100%;
        padding: 50px;
        position: absolute;   
    }
    .stepIntoClassDialog {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-bottom:20px;
    }
   
</style>

